<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="head"></div>
    <!-- DataTables -->
    <link rel="stylesheet" href="../plugins/datepicker/datepicker3.css"/>
    <link rel="stylesheet" href="../plugins/datatables/dataTables.bootstrap.css"/>
    <title>订单管理</title>
</head>

<body class="hold-transition skin-blue sidebar-mini ">
<div class="wrapper">

    <div th:replace="header"></div>
    <div th:replace="sidebar"></div>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-body">
                            <table id="dataTable" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>订单编号</th>
                                    <th>演出名称</th>
                                    <th>数量</th>
                                    <th>买家</th>
                                    <th>下单状态</th>
                                    <th>下单时间</th>
                                    <th>付款金额</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="item:${list}">
                                    <td th:text="${item.orderId}"></td>
                                    <td th:text="${item.playName}"></td>
                                    <td th:text="${item.quantity}"></td>
                                    <td th:text="${item.name}"></td>
                                    <td th:text="${item.status}"></td>
                                    <td th:text="${#dates.format(item.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                                    <td th:text="${item.payAmount}"></td>
                                    <td style="text-align: center">
                                        <a th:href="@{/order/detail(id=${item.id})}" class="center-block">
                                            <span class="glyphicon glyphicon-eye-open" title="详情"></span>
                                        </a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
</div>

<div th:replace="script"></div>

<!-- page script -->
<script>
    $(function () {
        $('#dataTable').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            "info": true,
            "autoWidth": false
        });
        $(".dateTimeRange").datepicker({
            language: "zh-CN",
            autoclose: true,//选中之后自动隐藏日期选择框
            clearBtn: true,//清除按钮
            todayBtn: 'linked',//今日按钮
            format: "yyyy-mm-dd"
        });
    });

</script>
<script th:src="@{/js/list-page.js}"></script>
<script th:src="@{/plugins/datepicker/bootstrap-datepicker.js}"></script>
<script th:src="@{/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js}"></script>
</body>
</html>